import {
  AbstractNavigator,
  WithMargins,
  AbstractImage,
  C09Address,
  AbstractButton,
  C12Recommendation,
} from "@/components";
import {
  getExhibitions,
  useApplicationInfo,
} from "@/store/applicationDataContext";
import { View } from "@tarojs/components";
import { useEffect } from "react";
import { formatDateString } from "@/utils";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";
import { useDidShow } from "@tarojs/taro";
import { DiscoverTabsEnum } from "@/pages/discover/discoverData";
import { apiItemTypeMapping } from "@/utils/apiMapping";
import style from "./index.module.scss";

export default function C17ExhibitionListing() {
  const { applicationState, dispatch } = useApplicationInfo();
  const { exhibitionsListing } = applicationState;

  useEffect(() => {
    if (!applicationState.exhibitionsListing) {
      getExhibitions(dispatch);
    }
    initSharing();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

  useEffect(() => {
    sendAction(ActionNames.ExhibitionImpression);
  }, []);

  useDidShow(() => {
    initSharing();
  });

  const initSharing = () => {
    if (dispatch) {
      dispatch({
        type: "DISCOVER_TAB",
        data: {
          tab: DiscoverTabsEnum.Exhibitions,
        },
      });
    }
  };

  return (
    <View className={style["exhibition-wrapper"]}>
      {exhibitionsListing && (
        <>
          <WithMargins>
            <View className={style["current-exhibit"]}>
              <AbstractImage
                src={exhibitionsListing.heroExhibitionCover}
                type="none"
                className={style["current-exhibit-image"]}
              />
              <View className={style["current-exhibit-title"]}>
                {exhibitionsListing.heroExhibitionName}
              </View>
              <View className={style["current-exhibit-dates"]}>
                {formatDateString(exhibitionsListing.heroExhibitionDateStart)} -{" "}
                {formatDateString(exhibitionsListing.heroExhibitionDateEnd)}
              </View>
              <View className={style["current-exhibit-address"]}>
                <C09Address
                  upperLine={exhibitionsListing.address.courseAddress}
                  lowerLine={exhibitionsListing.address.courseAddressInfo}
                  lat={+exhibitionsListing.address.lat}
                  lon={+exhibitionsListing.address.lon}
                  dest={exhibitionsListing.address.dest}
                />
              </View>
            </View>

            <AbstractNavigator
              url={`pages/exhibition-detail/index?id=${exhibitionsListing.heroExhibitionId}`}
              className={style["current-exhibit-button"]}
              onClick={() => {
                sendAction(ActionNames.ExhibitionKnowMoreClick, {
                  [ActionKeys.ExhibitionName]:
                    exhibitionsListing.heroExhibitionName,
                  [ActionKeys.ExhibitionLocation]:
                    exhibitionsListing.address.courseAddress,
                  [ActionKeys.ExhibitionTime]:
                    exhibitionsListing.heroExhibitionDateStart,
                });
              }}
            >
              {exhibitionsListing.appointmentStatus === 2 ? (
                <AbstractButton color="dark" disabled>
                  即将开展
                </AbstractButton>
              ) : exhibitionsListing.appointmentStatus === 0 ? (
                <AbstractButton color="exhibition">已结束</AbstractButton>
              ) : (
                <AbstractButton color="exhibition">了解更多</AbstractButton>
              )}
            </AbstractNavigator>
          </WithMargins>

          {/* 青少年工坊 */}
          {exhibitionsListing.courseListVos &&
            !!exhibitionsListing.courseListVos.length && (
              <C12Recommendation
                recommendationTitle="儿童及青少年工坊"
                cardData={exhibitionsListing.courseListVos.map(
                  (youthWorkshop) => ({
                    cardId: youthWorkshop.id,
                    imagePath: youthWorkshop.cover,
                    title: youthWorkshop.name,
                    tag: youthWorkshop.typeName,
                    cost: youthWorkshop.price,
                    type: "course-card",
                    themeColor: youthWorkshop.typeLabelColor,
                    redirect: apiItemTypeMapping[youthWorkshop.type],
                  })
                )}
              />
            )}

          <C12Recommendation
            recommendationTitle="L'ÉCOLE全球展览"
            cardData={exhibitionsListing.listedExhibitions.map(
              (exhibitionRecommendation) => ({
                cardId: exhibitionRecommendation.id,
                imagePath:
                  exhibitionRecommendation.sharePoster ||
                  exhibitionRecommendation.cover,
                title: exhibitionRecommendation.name,
                location: exhibitionRecommendation.city,
                type: "exhibition-listing-card",
                redirect: "exhibition",
              })
            )}
            className={
              exhibitionsListing.courseListVos &&
                !!exhibitionsListing.courseListVos.length
                ? "no-cut-corner"
                : ""
            }
          />
        </>
      )}
    </View>
  );
}
